<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/base.css">
		<style>
			.banner {
				background-color: #4a4a4a;
				height: 8rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.banner img {
				width: 4rem;
				height: 7rem;
			}

			.mui-card {
				box-shadow: none;
				margin-bottom: 0;
			}

			.mui-card-header:after {
				height: 0;
			}

			.mui-card-content-inner {
				padding-top: 0;
				padding-bottom: 0;
			}

			.mui-card-content-inner p {
				border-bottom: 1px solid #8F8F94;
				padding-bottom: 10px;
			}

			.cart-mid-title {
				padding: 0 15px;
			}

			.cart-mid-desc {
				width: 85%;
			}

			.cart-bottom-desc {
				display: flex;
				flex-wrap: wrap;
				/* justify-content: left; */
			}

			.actor-item {
				margin-left: 10px;
				width: 23%;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.actor-item img {
				height: 2.4rem;
			}

			/* 评论 */
			.comment {
				margin-top: 30px;
			}

			.comment-title {
				background-color: #ddd;
				text-align: center;
				height: 1.2rem;
				line-height: 1.2rem;
			}

			.comment-content {
				margin: 10px 0 10px 25px;
				padding-right: 15px;
			}

			.comment-item {
				border-bottom: 1px solid #ddd;
				padding-top: 10px;
				padding-bottom: 20px;
			}

			.comment-item .item-t {
				line-height: .8rem;
			}

			.comment-item .item-t::after {
				display: block;
				content: '';
				height: 0;
				visibility: hidden;
				clear: both;
			}

			.comment-item .item-t img {
				height: .8rem;
				width: .8rem;
				border-radius: 50%;
				float: left;
			}

			.comment-item .item-t .nickname {
				float: left;
				margin-left: .3rem;
				color: #000000;
				font-size: .32rem;
			}

			.comment-item .item-t .time {
				float: right;
			}

			.comment-item .item-b {
				margin-left: 1.1rem;
			}
		</style>
	</head>
	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">电影</h1>
		</header>
		<!-- 内容主容器 -->
		<div class="mui-content" id="app">
			<div class="banner">
				<img :src="movie.images.large" alt="">
			</div>
			<div class="mui-card">
				<div class="mui-card-header cart-top-title">{{movie.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>{{movie.year}}/{{movie.countries}}/{{movie.genres}}{{movie.directors2}}导演作品</p>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header cart-mid-title">
					<p>剧情简介</p>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner cart-mid-desc" v-if="movie.summary">
						{{movie.summary}}
					</div>
					<div class="mui-card-content-inner cart-mid-desc" v-else>
						暂无数据
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header cart-bottom-title">
					<p>演员</p>
				</div>
				<div class="mui-card-content">
					<ul class="mui-card-content-inner cart-bottom-desc">
						<li class="actor-item" v-for="(val,key) in movie.casts" :key="key">
							<img :src="val.avatars.large">
							<div class="desc">{{val.name}}</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 评论 -->
		<div class="comment">
			<div class="comment-title">
				评论
			</div>
			<div class="comment-content">
				<div class="comment-item">
					<div class="item-t">
						<img src="../images/actor.jpg" alt="">
						<p class="nickname">昵称</p>
						<p class="time">2018-1-31</p>
					</div>
					<div class="item-b">
						我是评论的内容我是评论的内容我是评论的内容
					</div>
				</div>
				<div class="comment-item">
					<div class="item-t">
						<img src="../images/actor.jpg" alt="">
						<p class="nickname">昵称</p>
						<p class="time">2018-1-31</p>
					</div>
					<div class="item-b">
						我是评论的内容我是评论的内容我是评论的内容
					</div>
				</div>
				<div class="comment-item">
					<div class="item-t">
						<img src="../images/actor.jpg" alt="">
						<p class="nickname">昵称</p>
						<p class="time">2018-1-31</p>
					</div>
					<div class="item-b">
						我是评论的内容我是评论的内容我是评论的内容
					</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			mui.init();

			let app = new Vue({
				el: "#app",
				data: {
					mid: 0,
					movie: {
						images: {},
						rating: {}
					}
				}
			});
			// 绑定mui.fire()自定义的事件
			window.addEventListener('getMovie', function(e) {
				// console.log(JSON.stringify(e));
				let mid = e.detail.mid;
				// console.log(mid);
				// 增加loading加载效果
				plus.nativeUI.showWaiting('加载中。。。')
				// 写电影详情内容的请求
				mui.getJSON('http://t.yushu.im/v2/movie/subject/' + mid, {
					apikey: '0df993c66c0c636e29ecbb5344252a4a'
				}, function(data) {
					// 成功
					// console.log(JSON.stringify(data));	// 把json对象转成字符串

					// 对国家、剧情、导演的数据进行处理
					data.countries = data.countries.join('，');

					data.genres = data.genres.join('，');

					let arr = [];
					data.directors.forEach(function(v) {
						arr.push(v.name);
					})
					// json对象可增加新的属性
					data.directors2 = arr.join('/')

					app.movie = data;

					setTimeout(function() {
						plus.nativeUI.closeWaiting();
					}, 500);

				}, function() {
					alert('请求延迟，请检查网络');
				});
			})
			// 监听当前窗口是否隐藏
			mui.plusReady(function() {
				// 获取当前窗口
				let self = plus.webview.currentWebview();
				self.addEventListener('hide', function() {
					// console.log(3);
					// 页面回到顶部
					window.scrollTo(0, 0);
					// 清空数据
					app.movie = {
						images: {},
						rating: {}
					}
				})
			})
		</script>
	</body>
</html>
